<template>
  <div id="detail">
    <header onclick="history.go(-1)">
      <img src="../assets/img/return.png" alt="" />
    </header>
    <div class="banner">
      <van-image :src="uploads + news.img" />
    </div>
    <article>
      <h1>{{ news.title }}</h1>
      <p class="type">
        <span
          >分类：<span id="type">{{ news.type.name }}</span></span
        >
        <span
          >发布日期：<span id="create_time">{{ news.create_time }}</span></span
        >
      </p>
      <hr />
      <div id="content" v-html="news.content"></div>
    </article>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      news: [],
      uploads: this.$store.state.uploads,
    };
  },

  created() {
    axios
      .get("/api/news/detail.html?id=" + this.$route.params.id)
      .then((res) => {
        var data = res.data;
        var json = eval("(" + data + ")");
        this.news = json.data;
      });
  },
};
</script>

<style lang="scss" scoped>
#detail {
  padding: 5px;
}
header {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000000;
}
header img {
  width: 30px;
  height: 30px;
  margin-left: 7px;
  margin-top: 10px;
}
.banner img {
  width: 100%;
}
.type {
  font-size: 15px;
}
.type > :last-child {
  float: right;
}
</style>